<template>
  <div class="search">
    <div class="head">
      <span class="ift-back" @click="returns"></span>
      <div class="input">
        <input type="text" placeholder="搜索漫画名或作者" v-model="value" />
        <div class="ift-search" @click="searchResult"></div>
      </div>
    </div>
    <div class="hot" v-show="!value">
      <h1>热门搜索</h1>
      <div class="Popular-search">
        <div v-for="(item, index) in hot" :key="index" @click="add(index)">
          {{ item }}
        </div>
      </div>
    </div>
    <p v-show="value" class="ss">搜索结果</p>
    <ul v-show="value">
      <li v-for="(item, index) in image" :key="index" @click="details(item.id)">
        <p>{{ item.names }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      hot: [],
      image: [],
    };
  },
  methods: {
    details(id) {
      this.$router.push({ name: "details", query: { id: id } });
    },
    searchResult() {
      this.$router.push({ name: "searchResult", query: { name: this.value } });
    },
    returns() {
      this.$router.go("-1");
    },
    add(index) {
      this.value = this.hot[index];
    },
  },
  watch: {
    value() {
      let image = this.$store.state.image;
      let index = image.findIndex((item) => item.names == this.value);
      this.image.push(image[index]);
    },
  },
  created() {
    let image = this.$store.state.image;
    image.forEach((item) => {
      this.hot.push(item.names);
    });
  },
};
</script>
<style lang="less">
.search {
  color: #fc6976;
  .head {
    display: flex;
    padding: 0 8px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    span {
      font-size: 20px;
    }
    .input {
      width: 90%;
      margin: 0 10px 0 20px;
      height: 30px;
      padding-right: 10px;
      position: relative;
      input {
        width: 90%;
        height: 30px;
        font-size: 12px;
        padding: 0 30px 0 15px;
        border-radius: 15px;
        color: black;
        border: 1px solid #fc6976;
        margin: 0;
      }
      ::-webkit-input-placeholder {
        color: rgb(197, 195, 195);
      }
      div {
        font-size: 18px;
        position: absolute;
        top: 0%;
        right: 1%;
      }
    }
  }
  .hot {
    width: 96%;
    margin: 0 auto;
    h1 {
      font-size: 14px;
      font-weight: 400;
      padding: 10px 0;
    }
    .Popular-search {
      div {
        padding: 7px 10px;
        margin: 5px;
        float: left;
        background: aqua;
        border-radius: 13px;
        font-size: 12px;
        &:nth-child(1n) {
          color: #fa7672;
          background: #fff4f3;
        }
        &:nth-child(2n) {
          color: #4ed7df;
          background: #eafcfd;
        }
        &:nth-child(3n) {
          color: #ff9dfc;
          background: #ffefff;
        }
        &:nth-child(4n) {
          color: #85d74f;
          background: #effae4;
        }
        &:nth-child(5n) {
          color: #78c6ff;
          background: #ebf7ff;
        }
      }
    }
  }
  .ss {
    width: 96%;
    margin: 0 2%;
    font-size: 14px;
  }
  ul {
    width: 96%;
    margin: 0 2%;
    color: #555;
    font-size: 14px;
    li {
      border-bottom: 1px solid #ddd;
    
    }
  }
}
</style>